<template>
    <div>
        <div><h3>观众看直播</h3></div>
        <div>
            <div id="id_test_video" style="float: left;margin-left: 123px">
            </div>
        </div>
    </div>
</template>

<script>

    import { getRoom } from '@/api/live/room.js'
    export default {
        name: 'PlayVideoPage',
        props: {
          roomId: { type: [String,Number], default: 0 },
        },
        data() {
            return {
                roomInfo: null,
            }
        },
        mounted() {
            console.log('roomId='+this.roomId);
            //--2 获取房间信息
            let param = {id: this.roomId};
            getRoom(param).then(res => {
                console.log('getRoom', res);
                if(res.data.code == 200) {
                    this.roomInfo = res.data.data;
                    this.joinRoom();
                }
            });
            
        },
        methods: {
            joinRoom() {
              this.player = new TcPlayer('id_test_video', {
                   "m3u8": this.roomInfo.playUrl,
                   "autoplay" : true,
                   "poster" : this.roomInfo.coverUrl,
                   "width" :  '660',//视频的显示宽度，请尽量使用视频分辨率宽度
                   "height" : '490'//视频的显示高度，请尽量使用视频分辨率高度
              });
            },
        }
    }
</script>

<style>
</style>